<template>
  <el-scrollbar>
    <div class="scrollbar-flex-content">
      <el-tag
        class="tag"
        @close="handleClose(index)"
        @click="onChange(item.path)"
        :type="$route.path==item.path ? '':'info'"
        :effect="$route.path==item.path ?'dark':'plain'"
        :class="$route.path==item.path ? activeClass:''"
        :closable="index!==0"
        v-for="(item,index) in taglist"
        :key="index"
      >
        <el-dropdown trigger="contextmenu" @command="handleCommand">
          {{$t(item.title)}}
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item :icon="refreshRight" :command="{a:1,path:item.path,index}">刷新</el-dropdown-item>
              <el-dropdown-item :icon="close" :command="{a:2,path:item.path,index}">关闭右侧标签</el-dropdown-item>
              <el-dropdown-item :icon="circleClose" :command="{a:3,path:item.path,index}">全部关闭</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-tag>
    </div>
  </el-scrollbar>
</template>
<script>
import { refreshRight, close, circleClose } from "@element-plus/icons-vue";
import { mapActions,mapGetters } from 'vuex';
export default {
  computed: {
    ...mapGetters(["taglist"])
  },
  data() {
    return {
      activeClass: "iconfont icon-dingwei1 el-tag__close",
      refreshRight,
      close,
      circleClose,
    };
  },
  watch: {
    $route(val) {
      this.watchRouter(val);
    },
  },
  methods: {
    ...mapActions(["watchrouters","deletetag"]),
    // 添加标签事件
    watchRouter(val) {
      this.watchrouters(val)
    },
    // 标签的移除事件
    handleClose(index) {
      // if (this.taglist.length == index + 1) {
      //   this.taglist.splice(index, 1);
      //   this.$router.push(this.taglist[index - 1].path);
      // } else {
      //   this.taglist.splice(index, 1);
      //   this.$router.push(this.taglist[index].path);
      // }
      this.deletetag(index)
    },
    // 标签的触发事件
    onChange(path) {
      this.$router.push(path);
    },
    // 标签的鼠标右击事件
    handleCommand(e) {
      switch (e.a) {
        case 1: // 刷新事件
      this.$router.push("/index/refresh" + e.path) 
          break;
        case 2: //关闭右侧标签事件
          if (this.taglist.length >= e.index + 1) {
            let num = this.taglist.length - e.index + 1;
            this.taglist.splice(e.index + 1, num);
            this.$router.push(this.taglist[e.index].path);
          }
          break;
        case 3: // 关闭全部标签事件
          this.taglist.splice(1, this.taglist.length - 1);
          this.$router.push("/index");

          break;
        default:
          break;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.tag {
  margin-left: 15px;
  margin-top: 10px;
  cursor: pointer;
}
.scrollbar-flex-content {
  height: 50px;
  display: flex;
}
</style>